<template>
	<div class='ordertome-div'>
		<!--二维码设置区域-->
		<div class='header-div'>
			<div class='my_bg'></div>
			<div class='setting-box white_bg'>
				<image class='avatarUrl' :src="userInfo.avatarUrl"></image>
				<p class='nickname'>{{userInfo.nickName}}</p>
				<image class='qrcode' :src='myqrcode'></image>
				<p class='set_info'>
					<span class='txt'>设置寄件信息</span>
					<span class='iconfont icon-modify'></span>
				</p>
			</div>
		</div>
		
		<!--设置寄件信息-->
		<div class='setting-div margin_top30 white_bg padding10'>
			<ul>
				<li>
					<view class="jiheader">
						<span class='ji'>寄</span>
						<span class='title'>寄件信息</span>
						<span class='zhantie' @click='AICopy'>智能粘贴</span>
					</view>
				</li>
				<li>
					<input type="text" v-model='sendInfo.name' placeholder="姓名"/>
					<span class='iconfont icon-xingming choose_user' @click='chooseAddress'></span>
				</li>
				<li>
					<input type="number" v-model='sendInfo.tele' placeholder="手机号/固定电话"/>
				</li>
				<li>
					<input type="text" v-model='sendInfo.address' placeholder="选择地址"/>
					<span class='iconfont icon-you' @click='chooseAddr'></span>
				</li>
				<li>
					<textarea type="text" auto-height v-model='sendInfo.detail_addr' placeholder="请输入详细地址:街道、路、小区、单元"/>
				</li>
			</ul>
			<div class='group-div'>
				<button size="mini" class='reset' @click='resetForm'>重置</button>
				<button size="mini" class='reset' @click='saveForm'>保存</button>
			</div>
			
		</div>
	</div>
</template>

<script>
import {post,showToast,getClipboardData,checkPhone,checkHtml} from '../../utils/index.js';
import {mapGetters,mapActions} from 'vuex';
import {getMyReceiveAddrUrl,saveMyQRCodeInfoUrl} from '../../config.js';
export default{
	data(){
		return {
			myqrcode: '',  //我的二维码
			sendInfo: {  //寄件人信息
				name: '', //姓名
				tele: '',  //电话
				address: '', //省市区
				detail_addr: '', //详细地址信息
			},
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted(){
		this.getMyQRCode();
	},
	methods: {
		//获取我的二维码
		getMyQRCode(){
			var self = this;
			post(getMyReceiveAddrUrl, {
				session_token: self.userInfo.session_token
			})
			.then((res)=>{
				if(res.code==200){
					var data = res.data;
					self.myqrcode = data.qrcode;
					self.sendInfo = {  //寄件人信息
						name: data.name, //姓名
						tele: data.tele,  //电话
						address: data.address, //省市区
						detail_addr: data.detail, //详细地址信息
					};
				}else{
					showToast(res.errMsg);
				}
			});
		},
		//重置表格
		resetForm(){
			this.sendInfo = { 
				name: '', //姓名
				tele: '',  //电话
				address: '', //省市区
				detail_addr: '', //详细地址信息
			};
		},
		//智能粘贴
		AICopy(){
			let self = this;
			getClipboardData()
			.then((res)=>{
				var dataArr = res.split('\n');
				if(dataArr.length==1){
					showToast('剪贴板内容不合规');
					return;
				}else{
					let tmpObj = { 
						name: dataArr[0], //姓名
						tele: dataArr[1],  //电话
						address: dataArr[2], //省市区
						detail_addr: dataArr[3], //详细地址信息
					};
					self.sendInfo = tmpObj;
				}
			})
			.catch(()=>{});
		},
		//从已添加过的地址中选择地址
		chooseAddress(index){
			let url = "/pages/address/list/index?mine=1";
			uni.navigateTo({
				url: url
			});
		},
		//选择地址
		chooseAddr(){
			var self = this;
			uni.chooseLocation({
				success(res){
					self.sendInfo.address = res.address;
					self.sendInfo.detail_addr = res.name;
				}
			});
		},
		//保存寄件信息
		saveForm(){
			let self = this;
			if(checkHtml(this.sendInfo.name)){
				showToast('名字中包含非法字符');
				this.sendInfo.name = '';
				return;
			};
			if(!checkPhone(this.sendInfo.tele)){
				showToast('电话输入不规范');
				return;
			};
			if(checkHtml(this.sendInfo.address)){
				showToast('地址中包含非法字符');
				this.sendInfo.address = '';
				return;
			};
			if(checkHtml(this.sendInfo.detail_addr)){
				showToast('详细地址中包含非法字符');
				this.sendInfo.detail_addr = '';
				return;
			};
			post(saveMyQRCodeInfoUrl, {
				session_token: self.userInfo.session_token,
				name: self.name,
				tele: self.tele,
				address: self.address,
				detail: self.detail_addr
			})
			.then((res)=>{
				if(res.code==200){
					//self.myqrcode = res.data.qrcode;  //替换我的二维码信息
					showToast('保存成功','success');
				}else{
					showToast(res.errMsg);
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
@import '../../style/default.less';
.header-div{
	position: relative;
	overflow: hidden;
	.my_bg{
		position: absolute;
		width: 100%;
		height: 300upx;
		z-index: -1;
		background: linear-gradient(top, #F8F8F8, #007AFF);
	}
	/**设置区域**/
	.setting-box{
		width: 90%;
		border-radius: 16upx;
		margin: 80upx auto 0;
		position: relative;
		text-align: center;
		padding: 1px 0 30upx 0;
		/*头像*/
		.avatarUrl{
			width: 120upx;
			height: 120upx;
			position: absolute;
			border-radius: 50%;
			left: 50%; top:0;
			margin-top: -60upx;
			margin-left: -60upx;
			border: 2px solid #fff;
			box-shadow: 0 0 10upx #fff;
		}
		p.nickname{
			margin-top: 70upx;
		}
		/**二维码**/
		.qrcode{
			width: 400upx;
			height: 400upx;
			margin-top: 40upx;
		}
		/*提示寄件信息*/
		.set_info{
			margin-top: 30upx;
			span.txt{
				color: #999;
			}
			span.iconfont{
				font-size: 46upx;
				margin-left:6upx;
				color: #007AFF;
			}
		}
	}
}
/**设置寄件信息**/
.setting-div{
	padding: 20upx;
	box-sizing: border-box;
	background: #fff;
	li{
		min-height: 60upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e5e5e5;
		.jiheader{
			width: 100%;
			height: 80upx;
			display: flex;
			align-items: center;
			.ji{
				color: #007AFF;
				border: 1px solid #007AFF;
				border-radius: 50%;
				text-align: center;
				display: inline-block;
				width: 40upx;
				height:40upx;
				line-height: 40upx;
			}
			.shou{
				color: @mainColor;
				border: 1px solid @mainColor;
			}
			.title{
				flex: 1;
				margin-left: 10upx;
			}
			.zhantie{
				color:#007AFF;
			}
		}
		input{
			flex:1;
		}
		span.iconfont{
			font-size: 40upx;
		}
		.choose_user{
			color: #007AFF;
		}
	}
	/**按钮组**/
	.group-div{
		margin-top: 20upx;
		display: flex;
		align-items: center;
		button{
			width: 30%;
			border: 1px solid #007AFF;
			color: #007AFF;
			background: #fff;
		}
		
	}
}
</style>
